<template>
  <el-container>
    <el-aside :width='$store.state.menuWidth'>
      <AdminMenu></AdminMenu>
    </el-aside>

    <el-container class="main-container">
      <el-header style="height: 50px;">
        <AdminHeader></AdminHeader>
      </el-header>

      <el-main class="main-content">
        <AdminTagList></AdminTagList>
        <router-view v-slot="{ Component }">
          <keep-alive :max="10">
            <component :is="Component"></component>
          </keep-alive>
        </router-view>
      </el-main>

      <el-footer class="footer">
        <AdminFooter></AdminFooter>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script setup>
import AdminHeader from '@/layouts/components/AdminHeader.vue';
import AdminMenu from '@/layouts/components/AdminMenu.vue';
import AdminTagList from '@/layouts/components/AdminTagList.vue';
import AdminFooter from '@/layouts/components/AdminFooter.vue';
import { onMounted } from 'vue';
onMounted(() => {
    // 移除 html 标签中的 class="dark"
    document.documentElement.classList.remove('dark');
})

</script>

<style scoped>
.main-container {
    position: relative;
    min-height: 100vh; /* 确保容器至少占满视口高度 */
}

.main-content {
    padding-bottom: 50px; /* 确保内容不会被 footer 遮挡 */
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
}
.el-aside {
    transition: all 0.3s;
}

.el-header {
    padding: 0;
}

.el-footer {
    padding: 0!important;
}
</style>